<template>
  <!-- 分配权限的对话框 -->
  <el-dialog title="分配权限" v-model="setRightDialogVisible" width="50%" @close="setRightDialogClosed">
    <!-- 树形控件 -->
    <el-tree ref="treeRef" style="max-width: 600px" :data="rightsList" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" :props="defaultProps"></el-tree>
    <span class="dialog-footer">
      <el-button @click="setRightDialogClosed">取 消</el-button>
      <el-button type="primary" @click="allotRights">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script  setup>
import { ref, computed, nextTick } from 'vue'
import { getRightsListApi } from '@/api/rights'
import { setRoleRightApi } from '@/api/role'
const defaultProps = {
  // 各级之间通过什么字段进行关联
  children: 'children',
  // 显示的文本的字段
  label: 'authName'
}
// 获取所有的权限列表（树形）
const rightsList = ref([])
const getRightsList = async () => {
  const data = await getRightsListApi('tree')
  rightsList.value = data
}
// 获取所有权限数据
getRightsList()

// 树形组件dom对象
const treeRef = ref(null)
// 对话框的控制
const setRightDialogVisible = ref(false)
// 监听对话框的关闭事件
const setRightDialogClosed = () => {
  setRightDialogVisible.value = false
  //  清空树形控件中选中的数据
  defKeys.value = []
}

// 定义当前修改的角色的数据
const role = ref([])

// 获取该角色的所有一级权限id作为默认展开的节点key,用户设置默认展开的一级节点，但是一般我们全部展开
// const defaultExpandedKeys = computed(() => role.chileren.value.map(item => item.id))

// 定义默认选中的节点id值数组
const defKeys = ref([])
// 通过递归的写法找出该角色对应的权限的最后一级id
function getLeafKeys(node, arr) {
  if (node.children) {
    node.children.forEach(item => {
      getLeafKeys(item, arr)
    })
  } else {
    arr.push(node.id)
  }
}

// 对外提供打开对话框的方法
const open = async row => {
  role.value = row
  // 找出该角色对应的权限的最后一级id
  getLeafKeys(row, defKeys.value)
  setRightDialogVisible.value = true
  // dom更新是异步，而且需要手动使用组件的方法去刷新
  await nextTick()
  treeRef.value.setCheckedKeys(defKeys.value)
}

const emit = defineEmits(['getRoleList'])
// 提交授权
const allotRights = async () => {
  // 1.获取全选节点的id
  const keys = treeRef.value.getCheckedKeys()
  // 2.获取半选的节点id
  const halfKeys = treeRef.value.getHalfCheckedKeys()
  // 3.将以上2者进行合并
  const rids = [...halfKeys, ...keys].join(',')
  // 3.调用接口，提交数据
  await setRoleRightApi(role.value.id, rids)
  // 4.关闭对话框
  setRightDialogVisible.value = false
  // 5.刷新角色列表
  emit('getRoleList')
}

defineExpose({ open })
</script>


<style lang="scss" scoped>
</style>